<template>
  <el-tabs class="tab-info-data" v-model="activeName">
    <el-tab-pane
        v-for="(item, index) in filterConfig" :key="index"
        :label="item.title"
        :name="item.key">
      <info-table v-loading="loading" :is-edit="isEdit" v-bind="item.props(item.key ? data[item.key] : data, data)" :value="getItemValue(item)" ></info-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import InfoTable from '@/components/InfoTable'
import { cloneDeep } from 'lodash'
export default {
  name: 'TabsInfoForm',
  components: {
    InfoTable
  },
  props: {
    isEdit: Boolean,
    data: Object,
    formData: Object,
    extraCfg: Array,
    labelCreater: Function,
    config: Array,
    value: {
      type: Object,
      default: () => ({})
    },
    loading: Boolean
  },
  data () {
    return {
      activeName: 'trade_audit'
    }
  },
  created () {
  },
  computed: {
    handleValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    configData () {
      return cloneDeep(this.config)
    },
    handledConfigData () {
      const { extraCfg, originHandle } = this
      originHandle && originHandle(this.configData)
      Array.isArray(extraCfg) && this.configData.push(...extraCfg)
      return this.configData
    },
    filterConfig () {
      return this.handledConfigData.filter(item => (item && !(typeof item.isHide === 'function' ? item.isHide(this.data) : item.isHide)))
    }
  },
  methods: {
    // utils
    getItemValue (item) {
      const { key, hasFields, defValue } = item
      key && hasFields && !this.value[key] && (this.handleValue = Object.assign(this.handleValue, { [key]: typeof defValue === 'function' ? defValue() : {} }))
      return key ? this.handleValue[key] : this.handleValue
    }
  }
}
</script>
<style lang="scss" scoped>
.tab-info-data {
  margin-top: 20px;
}
</style>
